<template>
  <div class="register-container">
    <h2>用户注册</h2>
    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <label for="username">用户名：</label>
        <input
            type="text"
            id="username"
            v-model="username"
            required
            @blur="validateUsername"
        />
        <span v-if="usernameError" class="error-message">{{ usernameError }}</span>
      </div>

      <div class="form-group">
        <label for="email">邮箱：</label>
        <input
            type="email"
            id="email"
            v-model="email"
            required
            @blur="validateEmail"
        />
        <span v-if="emailError" class="error-message">{{ emailError }}</span>
      </div>

      <div class="form-group">
        <label for="password">密码：</label>
        <input
            type="password"
            id="password"
            v-model="password"
            required
            @blur="validatePassword"
        />
        <span v-if="passwordError" class="error-message">{{ passwordError }}</span>
      </div>

      <div class="form-group">
        <label for="confirmPassword">确认密码：</label>
        <input
            type="password"
            id="confirmPassword"
            v-model="confirmPassword"
            required
            @blur="validateConfirmPassword"
        />
        <span v-if="confirmPasswordError" class="error-message">{{ confirmPasswordError }}</span>
      </div>

      <button type="submit" :disabled="!isFormValid">
        注册
      </button>
    </form>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 响应式数据
const username = ref('');
const email = ref('');
const password = ref('');
const confirmPassword = ref('');

// 错误信息
const usernameError = ref('');
const emailError = ref('');
const passwordError = ref('');
const confirmPasswordError = ref('');

// 表单验证计算属性
const isFormValid = computed(() => {
  return !usernameError.value &&
      !emailError.value &&
      !passwordError.value &&
      !confirmPasswordError.value &&
      username.value.trim() !== '' &&
      email.value.trim() !== '' &&
      password.value.trim() !== '' &&
      confirmPassword.value.trim() !== '';
});

// 用户名验证 (至少3个字符)
const validateUsername = () => {
  if (username.value.trim().length < 3) {
    usernameError.value = '用户名至少需要3个字符';
  } else {
    usernameError.value = '';
  }
};

// 邮箱验证
const validateEmail = () => {
  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailPattern.test(email.value)) {
    emailError.value = '请输入有效的邮箱地址';
  } else {
    emailError.value = '';
  }
};

// 密码验证 (至少6个字符)
const validatePassword = () => {
  if (password.value.trim().length < 6) {
    passwordError.value = '密码至少需要6个字符';
  } else {
    passwordError.value = '';
  }
};

// 确认密码验证
const validateConfirmPassword = () => {
  if (password.value !== confirmPassword.value) {
    confirmPasswordError.value = '两次输入的密码不一致';
  } else {
    confirmPasswordError.value = '';
  }
};

// 提交处理函数
const handleSubmit = () => {
  if (isFormValid.value) {
    // 这里添加实际的注册逻辑
    console.log('提交注册', {
      username: username.value,
      email: email.value,
      password: password.value
    });

    // 可以在这里添加API调用或路由跳转等逻辑
  }
};
</script>

<style scoped>
.register-container {
  max-width: 400px;
  margin: 2rem auto;
  padding: 2rem;
  background-color: #f8f8f8;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 1rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
}

input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.error-message {
  color: #e74c3c;
  font-size: 0.875em;
  margin-top: 0.25rem;
  display: block;
}

button {
  width: 100%;
  padding: 0.75rem;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:disabled {
  background-color: #aaa;
  cursor: not-allowed;
}
</style>
